<template>
    <div>
        <!-- loading动画 -->
        <div class="loading">
            <div class="loadbox">
                <img src="../../assets/images/loading.gif" /> 页面加载中...
            </div>
        </div>
        <div class="head">
            <div class="notice">公告：欢迎各位领导莅临本校参观指导</div>
            <h1>智慧校园可视化大屏</h1>
            <div class="weather">
                <div style="font-size: 0.3rem;color: white;margin-left: -1.78rem;">{{ time }}</div>
                <div style="float: left;margin: -0.1rem 0 0 -1.5rem;color:white">&emsp;{{ date }}</div>
                <div style="background-color:white;height: 0.48rem;width: 0.01rem;float: left;margin: -0.32rem 0 0 -0.45rem;"></div>
                <div>
                  <div style="float:left">
                    <img v-if="wea_img == 'yu'" src="../../assets/images/weather/rain.png" style="width:0.4rem;height:0.4rem;margin: -0.55rem 0 0 -0.3rem;">
                    <img v-if="wea_img == 'ying'" src="../../assets/images/weather/cloudy.png" style="width:0.4rem;height:0.4rem;margin: -0.55rem 0 0 -0.3rem;">
                    <img v-if="wea_img == 'qing'" src="../../assets/images/weather/sunny.png" style="width:0.4rem;height:0.4rem;margin: -0.55rem 0 0 -0.3rem;">
                    <img v-if="wea_img == 'yun'" src="../../assets/images/weather/duoyun.png" style="width:0.4rem;height:0.4rem;margin: -0.55rem 0 0 -0.3rem;">
                    <img v-if="wea_img == 'wu'" src="../../assets/images/weather/fog.png" style="width:0.4rem;height:0.4rem;margin: -0.55rem 0 0 -0.3rem;">
                    <img v-if="wea_img == 'xue' || wea_img == 'bingbao'" src="../../assets/images/weather/cloudy.png" style="width:0.4rem;height:0.4rem;margin: -0.55rem 0 0 -0.3rem;">
                    <img v-if="wea_img == 'lei'" src="../../assets/images/weather/thunder.png" style="width:0.4rem;height:0.4rem;margin: -0.55rem 0 0 -0.3rem;">
                    <img v-if="wea_img == 'shachen'" src="../../assets/images/weather/sand.png" style="width:0.4rem;height:0.4rem;margin: -0.55rem 0 0 -0.3rem;">

                  </div>
                  <div style="color:white;float:left;margin: -0.38rem -0.2rem 0 0;">
                     &emsp;{{ wea }} <div style="color:white;margin: -0.15rem 0 0 0;">&emsp;{{ tem }}℃</div>
                  </div>
                </div>
                
            </div>
        </div>
    </div>
   
</template>
<script>
import { getWether } from "../../api/wether/wether";
import $ from "jquery";
export default{
    data(){
        return{
            date: "",
            time: "",
            wea: "",
            tem: "",
            wea_img: "",
        }
    },
    created() {
        this.getTimes();
        this.getWeaAndTem();
    },
    mounted(){
         $(window).ready(function () {
            $(".loading").fadeOut()
        })
    },
    methods:{
        //获取时间
        getTimes() {
            setInterval(this.getTimesInterval, 1000);
        },
        getTimesInterval: function () {
            let _this = this;
            let year = new Date().getFullYear(); //获取当前时间的年份
            let month = new Date().getMonth() + 1; //获取当前时间的月份
            let day = new Date().getDate(); //获取当前时间的天数
            let hours = new Date().getHours(); //获取当前时间的小时
            let minutes = new Date().getMinutes(); //获取当前时间的分数
            let seconds = new Date().getSeconds(); //获取当前时间的秒数
            //当小于 10 的是时候，在前面加 0
            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            //拼接格式化当前时间
            _this.date = year + "-" + month + "-" + day;
            _this.time = hours + ":" + minutes + ":" + seconds;
        },
        // 获取天气
        getWeaAndTem() {
            const dataList = {
                appid: "55297681", // 账号ID
                appsecret: "PZcXgN1m", // 账号密钥
                city: "南充", // 城市名称,不要带市和区
                version: "v61",
            };
            getWether(dataList).then((res) => {
                this.wea = res.data.wea;
                this.tem = res.data.tem;
                this.wea_img = res.data.wea_img;
            });
        },
    },
}
</script>
<style>
.loading {
  position: fixed;
  left: 0;
  top: 0;
  font-size: 18px;
  z-index: 100000000;
  width: 100%;
  height: 100%;
  background: #1a1a1c;
  text-align: center;
}

.loadbox {
  position: absolute;
  width: 160px;
  height: 150px;
  color: #aaa;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -75px;
}

.loadbox img {
  margin: 10px auto;
  display: block;
  width: 40px;
}
.head {
  height: 1.05rem;
  background: url(../../assets/images/head3.png) no-repeat center center ;
  background-size: 110% 110%;
  background-position: -1.15rem -0.2rem;
  position: relative;
  z-index: 100;
  animation: showhead 1s;
}

@keyframes showhead {
  from {
    top: -200rem;
  }

  to {
    top: 0;
  }
}

.head h1 {
  font-weight: bold;
  text-align: center;
  background-image: linear-gradient(
    #fff,
    rgb(229, 245, 252),
    rgb(113, 196, 235),
    rgb(17, 159, 215)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
  font-size: 0.43rem;
  line-height: 0.9rem;
  letter-spacing: 0.1rem;
}

.head h1 img {
  width: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2rem;
}

.weather {
  position: absolute;
  right: 0.3rem;
  top: 0;
  line-height: 0.38rem;
}

.weather img {
  width: 0.37rem;
  display: inline-block;
  vertical-align: middle;
}

.weather span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.18rem;
  padding-right: 0.1rem;
}
.notice{
  position: absolute;
  left: 0.3rem;
  top: 0.12rem;
  line-height: 0.38rem;
  color: #3DCBEF ;
  font-size: 0.17rem;
}
</style>